<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../js/jiang_xue_jiao/jquery-1.11.3.js"></script>
  <title>设置权限</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      /* outline: solid pink; */
    }

    .all {
      width: 100%;
    }

    .text {
      font-size: 16px;
      width: 94%;
      padding: 15px 0px;
      margin-left: 3%;
      border-bottom: 1px solid rgb(207, 207, 207);
      font-size: 16px;
    }

    .list {
      font-size: 12px;
      display: flex;

    }

    ul {
      margin-top: 15px;
    }

    ul li {
      list-style: none;
      text-indent: 2em;
      margin-top: 10px;
    }

    .l_left {
      margin-left: 50px;
    }

    .l_right {
      margin-left: 80px;
    }

    .sure_btn,
    .cancel_btn {
      margin-left: 40px;
      background-color: #108ee9;
      color: #fff;
      border: none;
      border-radius: 3px;
      width: 70px;
      height: 30px;
      line-height: 30px;
    }

    .btn {
      position: absolute;
      bottom: 5%;
      left: 45%;
    }

    input {
      margin-top: 5px;
      margin-right: 5px;
    }
  </style>
</head>

<body>
  <div class="all">
    <div class="text">设置权限</div>
    <div class="list">
      <!-- 第一列 -->
      <div class="l_left">
        <div>
          <input class="memberAll" type="checkbox">会员
        </div>
        <ul>
          <li><input class="member" type="checkbox">会员管理</li>
          <li><input class="member" type="checkbox">会员等级</li>
          <li><input class="member" type="checkbox">会员分组</li>
          <li><input class="member" type="checkbox">团队提成</li>
        </ul>
        <div>
          <input class="goodsAll" type="checkbox">商品
        </div>
        <ul>
          <li><input class="goods" type="checkbox">商品管理</li>
          <li><input class="goods" type="checkbox">仓库管理</li>
          <li><input class="goods" type="checkbox">分类管理</li>
          <li><input class="goods" type="checkbox">标签管理</li>
          <li><input class="goods" type="checkbox">库存管理</li>
        </ul>
        <div>
          <input class="businessAll" type="checkbox">交易
        </div>
        <ul>
          <li><input class="business" type="checkbox">订单列表</li>
          <li><input class="business" type="checkbox">订单清关</li>
        </ul>
        <div>
          <input class="marketingAll" type="checkbox">营销
        </div>
        <ul>
          <li><input class="marketing" type="checkbox">满减</li>
          <li><input class="marketing" type="checkbox">优惠券</li>
        </ul>
        <div>
          <input class="financeAll" type="checkbox">财务
        </div>
        <ul>
          <li><input class="finance" type="checkbox">资金流水</li>
          <li><input class="finance" type="checkbox">佣金提现</li>
        </ul>
      </div>
      <!-- 第二列 -->
      <div class="l_right">

        <div>
          <input class="powerAll" type="checkbox">权限
        </div>
        <ul>
          <li><input class="power" type="checkbox">权限角色</li>
        </ul>
        <div>
          <input class="settingAll" type="checkbox">系统设置
        </div>
        <ul>
          <li><input class="setting" type="checkbox">订单设置</li>
          <li><input class="setting" type="checkbox">国家管理</li>
          <li><input class="setting" type="checkbox">地区管理</li>
          <li><input class="setting" type="checkbox">用户协议管理</li>
          <li><input class="setting" type="checkbox">分销规则</li>
          <li><input class="setting" type="checkbox">进口税协议</li>
          <li><input class="setting" type="checkbox">轮播图设置</li>
          <li><input class="setting" type="checkbox">风格设置</li>
        </ul>
      </div>
      <!-- 按钮 -->
      <div class="btn">
        <button class="sure_btn">确定</button>
        <button class="cancel_btn">取消</button>

      </div>
    </div>
  </div>

  <script>
    // 确定按钮函数
    $('.sure_btn').click(function () {
      alert('权限添加设置成功')
      location.href = './power.html'
    })
    // 取消按钮函数
    $('.cancel_btn').click(function () {
      location.href = './power.html'
    })
    // 1.点击勾选ul 全选和全不选的功能,将ul的状态复制给下面的li的状态
    $(".memberAll").change(function () {
      //console.log($(this).prop('checked'));//ul的状态
      $(".member").prop('checked', $(this).prop('checked'))
    })
    $(".goodsAll").change(function () {
      $(".goods").prop('checked', $(this).prop('checked'))
    })
    $(".businessAll").change(function () {
      $(".business").prop('checked', $(this).prop('checked'))
    })
    $(".marketingAll").change(function () {
      $(".marketing").prop('checked', $(this).prop('checked'))
    })
    $(".financeAll").change(function () {
      $(".finance").prop('checked', $(this).prop('checked'))
    })
    $(".powerAll").change(function () {
      $(".power").prop('checked', $(this).prop('checked'))
    })
    $(".settingAll").change(function () {
      $(".setting").prop('checked', $(this).prop('checked'))
    })
    // 2.当一个类别下面的li全都被勾选，则ul的状态也改变为全选中
    $(".member").change(function () {
      //console.log($('.member:checked').length); //得到有几个li
      //console.log($('.member').length); //一个类别下面的所有li的个数
      if ($('.member:checked').length === $('.member').length) {
        $('.memberAll').prop('checked', true)
      } else {
        $('.memberAll').prop('checked', false)
      }
    })
    $(".goods").change(function () {
      if ($('.goods:checked').length === $('.goods').length) {
        $('.goodsAll').prop('checked', true)
      } else {
        $('.goodsAll').prop('checked', false)
      }
    })
    $(".business").change(function () {
      if ($('.business:checked').length === $('.business').length) {
        $('.businessAll').prop('checked', true)
      } else {
        $('.businessAll').prop('checked', false)
      }
    })
    $(".marketing").change(function () {
      if ($('.marketing:checked').length === $('.marketing').length) {
        $('.marketingAll').prop('checked', true)
      } else {
        $('.marketingAll').prop('checked', false)
      }
    })
    $(".finance").change(function () {
      if ($('.finance:checked').length === $('.finance').length) {
        $('.financeAll').prop('checked', true)
      } else {
        $('.financeAll').prop('checked', false)
      }
    })
    $(".power").change(function () {
      if ($('.power:checked').length === $('.power').length) {
        $('.powerAll').prop('checked', true)
      } else {
        $('.powerAll').prop('checked', false)
      }
    })
    $(".setting").change(function () {
      if ($('.setting:checked').length === $('.setting').length) {
        $('.settingAll').prop('checked', true)
      } else {
        $('.settingAll').prop('checked', false)
      }
    })
  </script>
</body>

</html>